<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.min.2.1.1.js"></script>
		<script src="js/ajax.js"></script>
		<script src="js/index.js"></script>
		
		<style type="text/css">
			
			.green{
				
				/* border: 1px solid green; */
				width: 810px;
				height: 400px;
				
				/* 让DIV居中 */
				margin: 10px auto;
			}
			
			.div1{
				/* border: 1px solid red; */
				width: 800px;
				height: 50px;
				margin: 5px auto;
				
				/* 让DIV中的文本居中对齐 */
				text-align: center;
				
				/* 让文本上下居中对齐 行高 */
				line-height: 50px;
				
			}
			
			.div2,.div3,.div4,.div5{
				/* border: 1px solid blue; */
				width: 800px;
				height: auto;
				margin: 5px auto;
				
			}
			
			.div4{
				height: 100px;
			}
			
			.div3{
				margin-top: 60px;
				clear: both;
				
				/* 文本右对齐 */
				text-align: right;
			}
			
			.div21,.div22,.div23,.div24{
				
				/* border: 1px solid olivedrab; */
				width: 190px;
				height: 40px;
				float: left;
			}
			
			.div22{
				width: 220px;
			}
			
			#bookName{
				width: 130px;
			}
			
			.div24{
				text-align: right;
			}
			
			#bookTable{
				
				width: 800px;
				
			}
			#bookTable td,#bookTable th{
				border:  1px solid orange;
				height: auto;
				text-align: center;
			}
			
			#bookTable th{
				font-size: 13px;
			}
			
			.div5{
				height: 50px;
				line-height: 50px;
			}
			
			#left{
				/* border: 1px solid blue; */
				width: 30px;
				height: 30px;
				position: relative;
				top: 10px;
			}
			
			span{
				
				margin-left: 10px;
			}
		</style>
	</head>
	<body>
		
		<!-- 最外面的DIV 容器 -->
		<div class="green">
			
			<div class="div1">
					图书借阅系统
			</div>
			
			<div class="div2">
				
				<div class="div21">
					
					图书分类：
					<select id="bookType">
						<option value="1">小说</option>
						<option value="2">文学</option>
						<option value="3">传记</option>
						<option value="4">艺术</option>
						<option value="5">少儿</option>
						<option value="6">经济</option>
						<option value="7">管理</option>
						<option value="8">科技</option>
						
					</select>
					
				</div>
				<div class="div22">
					图书名称：<input id="bookName" />
					
				</div>
				<div class="div23">
						是否借阅：
						<select id="isBorrow">
							<option >--请选择--</option>
							<option value="borrowed">已借阅</option>
							<option value="0">未借阅</option>
							
						</select>
					
				</div>
				<div class="div24">
					
					<input  type="button" value="查询" onclick="searchBook()" />
					
				</div>
				
				<div class="div3">
					
					当前用户：
					
					<span id="userCode">
						
						
					</span>  
					<a href="javascript:void(0); onclick=quit();">退出</a>
					
				</div>
				
				<div class="div4">
					
					<table id="bookTable" cellpadding="0" cellspacing="0">
						
						<tr>
							<th>图书编号</th>
							<th>图书分类</th>
							<th>图书名称</th>
							<th>作者</th>
							<th>出版社</th>
							<th>操作</th>
						</tr>
						
						<tbody id="scott">
							<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
						</tbody>
					</table>
					
				</div>
				
				<div class="div5">
					
					<a href="javascript:void(0); onclick=prev();">上一页</a>
						<a href="javascript:void(0); onclick=prev();"><img id="left" src="img/left.webp" /></a>  
						<span><a href="javascript:void(0); onclick=getBookListWithPage(1)">1</a></span> 
						<span><a href="javascript:void(0); onclick=getBookListWithPage(2)">2</a></span> 
						<span><a href="javascript:void(0); onclick=getBookListWithPage(3)">3</a></span> 
						<span><a href="javascript:void(0); onclick=getBookListWithPage(4)">4</a></span> 
						<span><a href="javascript:void(0); onclick=getBookListWithPage(5)">5</a></span> 
						<span><a href="javascript:void(0); onclick=getBookListWithPage(6)">6</a></span> 
						<span><a href="javascript:void(0); onclick=getBookListWithPage(7)">7</a></span> 
						<span><a href="javascript:void(0); onclick=getBookListWithPage(8)">8</a></span> 
						<span><a href="javascript:void(0); onclick=getBookListWithPage(9)">9</a></span> 
					
					<a href="javascript:void(0); onclick=next();">下一页</a>
					共<span id="tl"></span>页
					到第
					<input id="pn" />页
					<input type="button" value="确定" onclick="goPage()" />
					
				</div>
			</div>
			
			
		</div>
	</body>
</html>
